<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自助式分析系统-航空数据一键分析</title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link href="/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="/js/jquery.min.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="/js/bootstrap.min.js"></script>
		<link href="/css/index.css" rel="stylesheet" />
	</head>
	<body>
		<header>航空数据展示</header>
		<div class="container m-20">
			<div class="row">
				<div class="col-lg-3">
					<div class="box1">
						<div class="title">吞吐量Top20的城市</div>
						<div class="box1_con" id="box1"></div>
					</div>
					<div class="box2 m-20">
						<div class="title">吞吐量Top20的机场</div>
						<div class="box2_con" id="box2"></div>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="box3">
						<div class="title">承运日期与旅客量</div>
						<div class="box3_con" id="box3">
	
						</div>
					</div>
					<div class="box4 m-20">
						<div class="title">航班号与旅客量</div>
						<div class="box4_con" id="box4"></div>
					</div>
				</div>
				<div class="col-lg-3 box5">
					<div class="box1">
						<div class="title">旅客量与每旅客分摊收入</div>
						<div class="box1_con" id="box5"></div>
					</div>
					<div class="box2 m-20">
						<div class="title">航班航线与每旅客分摊收入</div>
						<div class="box2_con" id="box6"></div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="/js/echarts.min.js"></script>
	</body>
<script>
    var chart1 = echarts.init(document.getElementById('box1'));
    var option1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            data: ['出港', '入港'],
            orient: 'vertical',
            right:'20',
            textStyle:{
            	color: 'white'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            axisLabel: {
				show: true,
				textStyle: {
					color: 'white'
				}
			}
        },
        yAxis: {
            type: 'value',
            axisLabel: {
				show: true,
				textStyle: {
					color: 'white'
				}
			}
        },
        dataset: {
            // 提供一份数据。
            source: {{source1|safe}}
        },
        series: [
            {
                name: '出港',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
            },
            {
                name: '入港',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
            }
        ]
    };
    chart1.setOption(option1);

    var chart2 = echarts.init(document.getElementById('box2'));
    var option2 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            data: ['出港', '入港'],
            orient: 'vertical',
            right:'20',
			textStyle: {
				color: 'white'
			}
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
             axisLabel: {
				show: true,
				textStyle: {
					color: 'white'
				}
			}
        },
        yAxis: {
            type: 'value',
             axisLabel: {
				show: true,
				textStyle: {
					color: 'white'
				}
			}
        },
        dataset: {
            // 提供一份数据。
            source: {{source2|safe}}
        },
        series: [
            {
                name: '出港',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
            },
            {
                name: '入港',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                emphasis: {
                    focus: 'series'
                },
            }
        ]
    };
    chart2.setOption(option2);

    var chart3 = echarts.init(document.getElementById('box3'));

    var option3 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                    orient: 'vertical',
                    right:'right',
					textStyle: {
						color: 'white'
					}
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                 axisLabel: {
					show: true,
					textStyle: {
						color: 'white'
					}
				}
            },
            yAxis: {
                type: 'value',
                 axisLabel: {
					show: true,
					textStyle: {
						color: 'white'
					}
				}
            },
            dataset:{
                source: {{source3|safe}}
            },
            dataZoom: [
                {
					type: 'slider',
					start: 0,
					end: 10
				},{
					type: 'inside',
					start: 0,
					end: 10
				}
            ],
            series: [
                {
                    name: '旅客量',
                    type: 'line',
                    stack: '1',
                },
                {
                    name: '主舱位F和C的旅客量',
                    type: 'line',
                    stack: '1',
                },
                {
                    name: '团队旅客量',
                    type: 'line',
                    stack: '1',
                },
                {
                    name: '常旅客量',
                    type: 'line',
                    stack: '1',
                }
            ]
        };
    chart3.setOption(option3);
    var chart4 = echarts.init(document.getElementById('box4'));

    var option4 = {
            tooltip: {
                trigger: 'axis'
            },
            dataZoom: [
                {
					type: 'slider',
					start: 0,
					end: 10
				},{
					type: 'inside',
					start: 0,
					end: 10
				}
            ],
            legend: {
                    orient: 'vertical',
                    right:'right',
					textStyle: {
						color: 'white'
					}
                },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel:{
                    //rotate: 90,
                    show: true,
					textStyle: {
						color: 'white'
					}
				}

            },
            yAxis: {
                type: 'value',
                axisLabel:{
                    //rotate: 90,
                    show: true,
					textStyle: {
						color: 'white'
					}
				}
            },
            dataset:{
                source: {{source4|safe}}
            },
            series: [
                {
                    name: '旅客量',
                    type: 'line',
                    stack: '1',
                },
                {
                    name: '主舱位F和C的旅客量',
                    type: 'line',
                    stack: '1',
                },
                {
                    name: '团队旅客量',
                    type: 'line',
                    stack: '1',
                },
                {
                    name: '常旅客量',
                    type: 'line',
                    stack: '1',
                }
            ]
        };
    chart4.setOption(option4);
    var chart5 = echarts.init(document.getElementById('box5'));
    var option5 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                orient: 'vertical',
                right:'right',
                textStyle: {
					color: 'white'
				}
            },
            dataZoom: [
                {
					type: 'slider',
					start: 0,
					end: 10
				},{
					type: 'inside',
					start: 0,
					end: 10
				}
            ],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel:{
                    show: true,
					textStyle: {
						color: 'white'
					}
				}
            },
            yAxis: {
                type: 'value',
                axisLabel:{
                    show: true,
					textStyle: {
						color: 'white'
					}
				}
            },
            dataset:{
                source: {{source5|safe}}
            },
            series: [
                {
                    name: '每旅客分摊收入',
                    type: 'bar',
                    stack: '1',
                }
            ]
        };
    chart5.setOption(option5);
    var chart6 = echarts.init(document.getElementById('box6'));
    var option6 = {
                tooltip: {
                    trigger: 'axis'
                },
                dataZoom: [
                {
					type: 'slider',
					start: 0,
					end: 10
				},{
					type: 'inside',
					start: 0,
					end: 10
				}
            ],
                legend: {
                    orient: 'vertical',
                    right:'20',
                    textStyle: {
						color: 'white'
					}
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '1%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel:{
                        rotate: 90,
						textStyle: {
							color: 'white'
						}
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{
                    show: true,
					textStyle: {
						color: 'white'
					}
				}
                },
                dataset:{
                    source: {{source6|safe}}
                },
                series: [
                    {
                        name: '旅客量',
                        type: 'bar',
                        stack: '1',
                    }
                ]
            };
    chart6.setOption(option6);
</script>
</html>
